<template>
	<view class="container" style="padding-top:15rpx ;">
		<view style="width: 100%; display: block;">
			<view style="width: 100rpx; height: 100rpx;float: left;"><open-data type="userAvatarUrl"></open-data></view>
			<view style="font-size:40rpx;float: left;margin: 20rpx;">Hi: {{ username }}</view>
			<view style="float: right;">
				<!-- <button @click="outLogin" size="mini">退出</button> -->
				<image src="/static/set.png" style="width: 50rpx; padding-top:20rpx; height: 50rpx;" @click="doSet"></image>
			</view>
		</view>
		<view style="width: 100%; clear:both; margin-top: 40rpx; padding: 20rpx;font-size: 35rpx;line-height: 150%;">
			<view style="float: left;margin-right: 40rpx;">
				<input type="text" disabled placeholder="开始时间" style="width:220rpx;" :value="startDate" @click="openCalendar1" />
				<!-- <button @click="openCalendar1" size="mini">{{startDate}}</button> -->
				<uni-calendar ref="calendar1" :insert="false" @confirm="confirmCalendar1" />
			</view>

			<view style="float: left;margin-right: 40rpx;">
				<input type="text" disabled placeholder="结束时间" style="width:220rpx;" :value="endDate" @click="openCalendar2" />
				<!-- <button @click="openCalendar2" size="mini">{{endDate}}</button> -->
				<uni-calendar ref="calendar2" :insert="false" @confirm="confirmCalendar2" />
			</view>
			<view style="float: left;">
				<icon type="search" size="20" color="blue" @click="search" style="margin-right: 40rpx;" />
				<icon type="clear" size="20" @click="reset" color="#ff0000" />
				<!-- <button @click="search" size="mini" type="primary">查询</button> -->
			</view>
		</view>
		<view style="width: 100%; clear:both;color: #4b81ff;">
			<p style="font-size: 35rpx;line-height: 150%;margin: 20rpx;">
				支出：{{ totalout }}元
				<br />
				收入：{{ totalin }}元
			</p>
		</view>
		<view style="width: 100%; clear:both;">
			<uni-list v-for="(item, index) in listinfo" :key="index">
				<uni-list-item
					:title="item.cost + ''"
					:note="noteFun(item.payChannel, item.payType, item.remarks)"
					:thumb="thumbFun(item.moneyType)"
					clickable
					@click="delItem(item.id)"
					:rightText="happenTimeFun(item.subDate)"
				></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
import { wxListAccount, wxdelAccount } from '@/api/public.js';
export default {
	data() {
		return {
			total: 0,
			totalin: 0,
			totalout: 0,
			listinfo: [{}],
			username: '',
			startDate: '',
			endDate: '',
			queryData: {}
		};
	},
	onShow: function() {
		this.getWxListAccount();
		this.username = uni.getStorageSync('username');
	},
	methods: {
		openCalendar1: function() {
			this.$refs.calendar1.open();
		},
		confirmCalendar1: function(e) {
			console.log(e);
			this.startDate = e.fulldate;
		},
		openCalendar2: function() {
			this.$refs.calendar2.open();
		},
		confirmCalendar2: function(e) {
			console.log(e);
			this.endDate = e.fulldate;
		},
		search: function() {
			this.queryData = { startDate: this.startDate, endDate: this.endDate };
			this.getWxListAccount();
		},
		reset: function() {
			this.startDate = '';
			this.endDate = '';
			this.queryData = {};
			this.getWxListAccount();
		},
		delItem: function(e) {
			uni.showModal({
				title: '提示',
				content: '是否删除',
				success: res => {
					if (res.confirm) {
						console.log('用户点击确定');
						let data = { id: e };
						wxdelAccount(data)
							.then(res => {
								this.getWxListAccount();
							})
							.catch(err => {
								uni.showToast({
									icon: 'none',
									title: err,
									duration: 1000
								});
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		doSet: function() {
			uni.navigateTo({
				url: '/pages/index/setting'
			});
		},
		noteFun: function(payChannel, payType, remarks) {
			if (!remarks) 
				remarks= '';
			else
				remarks = '/'+remarks;
			if (!payType) 
				payType = '';
			else
				payType = '/'+payType;
			if (!payChannel) 
				payChannel = '';
			else
				payChannel = payChannel;
			return payChannel+payType+remarks;
		},
		thumbFun: function(moneyType) {
			const mainUrl = getApp().globalData.websiteUrl;
			if (moneyType == 'in') {
				return '/static/in.png';
			} else return '/static/out.png';
		},
		happenTimeFun: function(num) {
			//时间戳数据处理
			let date = new Date(num * 1);
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? '0' + MM : MM; //月补0
			let d = date.getDate();
			d = d < 10 ? '0' + d : d; //天补0
			let h = date.getHours();
			h = h < 10 ? '0' + h : h; //小时补0
			let m = date.getMinutes();
			m = m < 10 ? '0' + m : m; //分钟补0
			let s = date.getSeconds();
			s = s < 10 ? '0' + s : s; //秒补0
			// return y + '-' + MM + '-' + d; //年月日
			return y + '-' + MM + '-' + d + '\n' + h + ':' + m+ ':' + s; //年月日时分秒
		},
		getTotal: function() {
			var c = 0;
			var cin = 0;
			var cout = 0;
			this.listinfo.forEach((item, i) => {
				c = parseFloat(item.cost) + c;
				if (item.moneyType == 'out') cout = parseFloat(item.cost) + cout;
				else cin = parseFloat(item.cost) + cin;
			});
			c = parseFloat(c).toFixed(2); //foFixed(2)是需要保留的有效数字
			this.total = c;
			this.totalout = parseFloat(cout).toFixed(2);
			this.totalin = parseFloat(cin).toFixed(2);
		},
		getWxListAccount: function() {
			let data = this.queryData;
			wxListAccount(data)
				.then(res => {
					if (res.code == 20000) {
						this.listinfo = res.data.result;
						this.getTotal();
					} else {
					}
				})
				.catch(err => {
					uni.showToast({
						icon: 'none',
						title: err,
						duration: 1000
					});
				});
		},
		outLogin: function() {
			try {
				uni.removeStorageSync('tokey');
			} catch (e) {
				// error
			}
			uni.navigateTo({
				url: '/pages/index/login'
			});
		}
	}
};
</script>

<style></style>
